import React, { Component } from 'react';
import { Table } from "antd";

import styles from './LossAndReplace.css';

class LossAndReplace extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    handleClick(state) {
        console.log(state);
        if (state === '正常') {
            console.log('进入挂失界面')
        } else {
            console.log('进入撤挂界面')
        }
    }
    render() {
        const columns = [
            { title: '种类', dataIndex: 'type', key: 'type' },
            { title: '卡号', dataIndex: 'number', key: 'number' },
            { title: '账户余额', dataIndex: 'balance', key: 'balance' },
            { title: '可用余额', dataIndex: 'usable', key: 'usable' },
            { title: '开户日期', dataIndex: 'date', key: 'date' },
            { title: '状态', dataIndex: 'state', key: 'state' },
            {
                title: '操作', dataIndex: '', key: 'handle', render: (record) => (
                    record.state === '正常' ?
                        <a onClick={this.handleClick.bind(this, record.state)}>挂失</a>
                        :
                        <a onClick={this.handleClick.bind(this, record.state)}>撤挂</a>)
            },
        ];

        const data = [
            { key: 1, type: '借记卡', number: '6212 872088889999', balance: '10000.00', usable: '10000.00', date: '2017.04.06', state: '正常' },
            { key: 2, type: '借记卡', number: '6212 872088889991', balance: '10000.00', usable: '10000.00', date: '2017.04.06', state: '已挂失' },
            { key: 3, type: '借记卡', number: '6212 872088889992', balance: '10000.00', usable: '10000.00', date: '2017.04.06', state: '正常' },
            { key: 4, type: '借记卡', number: '6212 872088889993', balance: '10000.00', usable: '10000.00', date: '2017.04.06', state: '正常' },
        ];
        return (
            <div className={styles.container}>
                <h2>综合信息查询</h2>
                <table className={styles.userInfo}>
                    <tbody>
                        <tr>
                            <td>姓名：</td>
                        </tr>
                        <tr>
                            <td>证件类型：</td>
                            <td>证件号码：</td>
                        </tr>
                    </tbody>
                </table>
                <div className={styles.line}></div>
                <div className={styles.userInfo}>
                    <p>尊敬的客户,您在我行的账户综合信息如下：</p>
                    <p>客户号：00000007845154</p>
                    <Table
                        columns={columns}
                        dataSource={data}
                        pagination={false}
                        style={{ marginBottom: '20px' }}
                    />
                    <p>请选择您要挂失的卡/单/折</p>
                </div>
            </div>
        )
    }
}

export default LossAndReplace;